<template>
    <div class="link-cell-contaner">
      <div class="img-box">
        <img src="~@/views/student/practice/multiple/components/multipleMain/img/allc_bj@2x.png" style="width: 100%;height: 100%">
        <div v-if="status === 0" class="status">未开始</div>
        <div v-else-if="status === 1" class="status">进行中</div>
        <div v-else class="status">已完成</div>
      </div>
      <div class="contaner">
        <span class="t1">{{linkName}}</span>
        <span class="t2">进度 {{finishedTaskNum}}/{{taskNum}}</span>
        <span class="t2">得分 {{scoreFormate}}</span>
      </div>
      <div class="button">
        <el-button v-if="status === 0" size="mini" :disabled="disabled" style="width: 128px;">
          开始训练
        </el-button>
        <el-button v-else-if="status === 1" type="primary" size="mini" :disabled="disabled" style="width: 128px;">
          继续训练
        </el-button>
        <el-button v-else type="primary" size="mini" :disabled="disabled" style="width: 128px;">
          重新训练
        </el-button>
      </div>
    </div>
</template>

<script>
export default {
  name: 'linkCell',
  props: {
    /**
     * 当前环节的状态; 0：未开始；1：进行中；2：已完成
     */
    status: Number,
    /**
     * 按钮是偶处于禁用状态
     */
    disabled: Boolean,
    /**
     * 资源案例id
     */
    resourceCaseId: String,
    /**
     * 环节名称
     */
    linkName: String,
    /**
     * 任务总数
     */
    taskNum: Number,
    /**
     * 完成的任务总数
     */
    finishedTaskNum: Number,
    /**
     * 得分
     */
    score: String
  },
  computed: {
    scoreFormate () {
      return this.score ? this.score : '--'
    }
  }
}
</script>

<style scoped lang="scss">
  .link-cell-contaner{
    width:180px;
    height:248px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 12px 0px rgba(4,0,0,0.05);
    border-radius:5px;
    display: flex;
    flex-flow: column nowrap;
    .img-box{
      width: 100%;
      height: 106px;
      position: relative;
      .status{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0px;
        bottom: 0px;
        font-size:14px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        width:66px;
        height:24px;
        background:rgba(245,27,78,1);
        border-radius:0px 5px 0px 0px;
      }
    }
    .contaner{
      box-sizing: border-box;
      padding: 10px;
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      .t1{
        font-size:18px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(16,29,55,1);
        line-height: 28px;
      }
      .t2{
        font-size:13px;
        line-height: 20px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(16,29,55,1);
        opacity:0.6;
      }
    }
    .button{
      margin-top: 15px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
